<template>
	<view class="addres">
		 我是地址列表
		 <view class="list">
			 <view class="row" v-for="item in addres " :key="item.id"  >
				 <view class="center" @tap="sendmessage(item)">
					 <view class="name-tel">
						 <view class="name"> {{item.name}} </view>
						 <view class="default" v-if="item.defaultStatus ? 'show':''"> 默认 </view>
					 </view>
					 <view class="tel">{{item.phoneNumber}}</view>
				 </view>
				 <view class="right">
					 <view class="icon" @tap="Modify(item)">
						 <image class="img" src="../../../static/icons/edit.png" ></image>
					 </view>
				 </view>
			 </view>
		 </view>
		 
		 <navigator url="./addAddres/addAddres">
			 <button >点击添加地址</button>
		 </navigator>
		 
	</view>
</template>

<script>
	import {
		findAllAddress
	} from"@/api/user/Addres/index.js"
	import{
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				addres:[],
				show:true
			};
		},
		onShow() {
			findAllAddress()
			.then(res=>{
				console.log(res);
				// defaultStatus 为1就是默认
				this.addres=res.data.items //地址列表
			})
		},
		onLoad() {
			// findAllAddress()
			// .then(res=>{
			// 	console.log(res);
			// 	// defaultStatus 为1就是默认
			// 	this.addres=res.data.items //地址列表
			// })
		},
		methods:{
			// 放到共享区域vuex
			// ...mapMutations(["uptAddres"]),
			sendmessage(all){
				// this.uptAddres(all)
				// console.log("放到共享区域vuex",all);
				console.log("存到本地",all);
				// 存到本地
				 uni.setStorageSync("selList",all)
				//后退操作
				uni.navigateBack({
					delta: 1,
				});
			},
			// 点击修改图片修改地址
			Modify(vaa){
				uni.navigateTo({
					url:"./addAddres/addAddres?addressId="+vaa.id
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.addres{

	.list{
		
		.row{
			display: flex;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #ccc;
			    margin: 0 auto;
			.center{
				width: 100%;
				
				.name-tel{
		
					
					display: flex;
					.name{
						margin-left: 15px;
						   
					}
					.default{
					padding-left: 20rpx;
					}
				}
				.tel{
					font-size: 12px;
					color: #999;
				}
			}
			.right{
				display: flex;
				.icon{
					    align-items: center;
					    width: 80rpx;
					    height: 80rpx;
					    border-left: solid 1rpx #aaa;
					    font-size: 40rpx;
					    color: #777;
					.img{
						padding: 20rpx;
						width: 40rpx;
						height: 40rpx;
						opacity: .8;
				
					}
				}
			}
		}
	}
}
</style>
